<template>
	<view class="mall">
		<navbar title="积分商城" :bg="nabBarBg" :fixed="true" :placeholder="false" />
		<view class="mall-box">
			<view class="mall-head sticky border-box">
				<image class="mall-head-bg absolute block"
					src="https://mall-admin.xinjiafu.net/mini-static/images/points/2.png" />
				<image class="mall-head-money absolute block"
					src="https://mall-admin.xinjiafu.net/mini-static/images/points/1.png" />
				<view class="main relative zi2">
					<view class="main-info">
						<view class="main-info-ds">当前积分</view>
						<view class="main-info-num">{{user.info.point || 0}}</view>
						<view class="main-info-order flex align-item_center" @click="pointsRecord">
							积分账单
							<image class="mall-head-bg block relative"
								src="https://mall-admin.xinjiafu.net/mini-static/images/points/3.png" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="mall-main relative zi2 border-box">
			<view class="mall-main-tabs sticky flex align-item_center justify-content_space-between ">
				<view class="mall-main-tabs-sub">
					<up-tabs :list="tabsList" :itemStyle="itemStyle" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
						lineWidth="60" lineHeight="2" lineColor="#A72530" @click="selectProduct"></up-tabs>
				</view>
				<image @click="setSearch" class="mall-main-tabs-search block flex-shrink0 v-seatch-img"
					src="https://mall-admin.xinjiafu.net/mini-static/images/points/4.png" />
			</view>

			<empty v-if="spuData.list.length === 0" />
			<view class="mall-main-items flex wrap justify-content_space-between align-item_center">
				<view class="item" v-for="item in spuData.list" :key="item.id" @click="mallDetails(item)">
					<image class="item-cover flex align-item_center justify-content_center" :src="item.picUrl" mode="aspectFill">
					</image>
					<view class="name">{{item.name}}</view>
					<view class="points">{{fen2yuan(item.price,0)}}<text>积分</text></view>
					<view class="line-points">{{fen2yuan(item.marketPrice,0)}}积分</view>
				</view>
			</view>
		</view>

		<tabbar :current="0" />
	</view>
</template>

<script setup>
	import tabbar from "@/components/tabbar.vue"
	import navbar from "@/components/navbar.vue"
	import empty from "@/components/empty.vue"
	import {
		ref,
		reactive
	} from 'vue';
	import {
		navigateTo
	} from "@/utils/tool.js"
	import {
		itemStyle,
		activeStyle,
		inactiveStyle
	} from "@/common/index.js"
	import {
		onPageScroll,
		onReachBottom,
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	import userApi from "@/api/member/user.js"
	import CategoryApi from "@/sheep/api/product/category.js"
	import SpuApi from "@/sheep/api/product/spu.js"
	import {
		fen2yuan
	} from '@/sheep/hooks/useGoods';

	const setSearch = () => {
		navigateTo("/points/search/index")
	}

	const selectProduct = (val) => {
		spuParams.categoryId = val.id;
		spuParams.pageNo = 1;
		spuPage()
	}

	const parentId = 86; // 积分
	onReachBottom(() => {
		if (spuData.list.length >= spuData.total) return;
		spuParams.pageNo++;
		spuPage()
	})

	onPageScroll((e) => {
		if (e.scrollTop >= 127) nabBarBg.value = '#A72530'
		else nabBarBg.value = 'transparent'
	})

	const pointsRecord = () => {
		navigateTo("/points/points/index")
	}

	const mallDetails = (item) => {
		navigateTo(`/points/mall_details/index?id=${item.id}`)
	}

	const user = reactive({
		info: {
			point: 0,
		}
	})

	const userGet = () => {
		userApi.get().then(res => {
			if (res.code === 0) {
				user.info = res.data;
			}
		})
	}

	const nabBarBg = ref("transparent")

	const spuData = reactive({
		list: [],
		total: 0
	})
	const spuParams = reactive({
		pageNo: 1,
		pageSize: 10,
		categoryId: null
	})
	const spuPage = () => {
		SpuApi.getSpuPage({
			...spuParams,
			recommend: spuParams.categoryId === parentId ? true : undefined
		}).then(res => {
			spuData.total = res.data.total;
			if (spuParams.pageNo === 1) spuData.list = res.data.list
			else spuData.list = spuData.list.concat(res.data.list)
		})
	}

	const tabsList = ref([])

	const categoryList = () => {
		CategoryApi.getCategoryList(parentId).then(res => {
			if (res.code === 0) {
				tabsList.value = [{
						id: 86,
						name: "热门推荐",
						parentId: 86
					},
					...res.data,
				]
				if (res.data.length > 0) {
					spuParams.categoryId = parentId
					spuPage()
				}
			}
		})
	}

	onShow(() => {
		userGet()
		categoryList()
	})
</script>

<style>
	page {
		background: #F8F3E9;
	}
</style>
<style scoped lang="scss">
	:deep(.u-tabs) {
		.u-tabs__wrapper__nav__item {
			// width: fit-content !important;
			padding: 0 18rpx !important;
		}
	}

	.mall-main {
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		background: #F8F3E9;
		top: -32rpx;

		&-items {
			padding: 0 32rpx 0;
			box-sizing: border-box;

			.item {
				width: 324rpx;
				height: 466.69rpx;
				padding-bottom: 40rpx;

				.line-points {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(153, 153, 153, 1);
					margin-top: 6rpx;
					text-decoration: line-through;
				}

				.points {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(167, 37, 48, 1);

					text {
						font-size: 24rpx;
						color: #400303;
					}
				}

				.name {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(64, 3, 3, 1);
					margin-top: 21rpx;
				}

				&-cover {
					width: 320rpx;
					height: 320rpx;
					border-radius: 8rpx;
					background: #EFE5D0;

					image {
						padding: 38rpx;
						box-sizing: border-box;
						width: inherit;
						height: inherit;
					}
				}
			}
		}

		&-tabs {
			width: 750rpx;
			box-sizing: border-box;
			padding: 34rpx 34rpx 42rpx;
			top: var(--navbarH);
			border-radius: inherit;
			background-color: #F8F3E9;

			&-sub {
				width: 550rpx;
			}

			&-search {
				// margin-left: 36rpx;
			}
		}
	}

	.mall-head {
		width: 100vw;
		height: 434rpx + 32rpx;
		top: 0rpx;
		overflow: hidden;

		&-money {
			top: 198rpx;
			right: -18rpx;
			width: 290rpx;
			height: 290rpx;
		}

		.main {
			padding-top: 198rpx;
			margin-left: 68rpx;

			&-info {
				&-order {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(255, 255, 255, 1);

					image {
						width: 12rpx;
						height: 24rpx;
						margin-left: 10rpx;
						top: -2rpx;
					}
				}

				&-num {
					font-size: 72rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 104.26rpx;
					color: rgba(255, 255, 255, 1);
				}

				&-ds {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(255, 255, 255, 1);
				}
			}
		}

		&-bg {
			left: 0;
			top: 0;
			width: 100%;
			height: 572rpx;
		}
	}
</style>